<template>
  <div class="login">
    {{ msg }}
    <!-- <div>
      用户名：
      <input type="text" v-model="name" />
    </div>
    <div>
      密码：
      <input type="text" v-model="password" />
    </div>
     -->

    <div class="checkbox">
      <div class="checkbox-item clearfix">
        <span>用户名：</span> <input type="text" v-model="name" />
      </div>
      <div class="checkbox-item clearfix">
        <span>密码：</span><input type="password" v-model="password" />
      </div>
      <div class="checkbox-item clearfix" v-if="isRegister">
        <span>确认密码：</span><input type="password" v-model="checkpassword" />
      </div>

      <div class="btu-area">
        <el-button type="primary" @click="login" v-if="!isRegister"
          >登陆</el-button
        >
        <el-button type="primary" @click="register" v-if="isRegister"
          >注册</el-button
        >
      </div>
      <span class="change" @click="isRegister=true">未注册？点这里</span>
    </div>
  </div>
</template>
<script>
export default {
  name: "login",
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.checkpassword !== "") {
          this.$refs.password.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.passwoed) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      msg: "登录注册",
      name: "",
      password: "",
      checkpassword: "",
      nameId: "",
      showID: false,
      array: [],
      isRegister: false,
      rules: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }]
      }
    };
  },
  methods: {
    login() {
      let params = {
        name: this.name,
        password: this.password
      };
      this.$http
        .post("/api/user/login", params)
        .then(res => {
          console.log(res);
          if (res.data.status == 1000) {
            this.$router.push({ name: "layout" });
            localStorage.setItem("user", JSON.stringify(res.data));
          } else {
            alert(res.data.message);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    register() {
      let params = {
        name: this.name,
        password: this.password
      };
      this.$http
        .post("/api/user/register", params)
        .then(res => {
          console.log(res);
          if (res.data.status == 1000) {
            alert(res.data.message);
          } else {
            alert(res.data.message);
          }
          this.isRegister = false
        })
        .catch(err => {
          console.log(err);
        });
    }
    //   getAll() {
    //     this.$http
    //       .get("/api/user/all")
    //       .then(res => {
    //         console.log(res);
    //         if (res.data.length > 0) {
    //           this.showAll = true;
    //           this.array = res.data;
    //         } else {
    //           alert("无注册用户！");
    //         }
    //       })
    //       .catch(err => {
    //         console.log(err);
    //       });
    //   },
    //   deleteone(names) {
    //     let params = {
    //       name: names
    //     };
    //     this.$http
    //       .post("/api/user/delete", params)
    //       .then(res => {
    //         console.log(res);
    //         this.array = res.data.data;
    //       })
    //       .catch(err => {
    //         console.log(err);
    //       });
  }
};
</script>

<style lang="scss">
.login {
  background-image: url("../image/loginbackground.jpg");
  background-position: center;
  height: 100vh;
  width: 100vw;
  position: relative;

  .clearfix:before,
  .clearfix:after {
    content: "";
    display: table;
  }
  .clearfix:after {
    clear: both;
  }
  .clearfix {
    *zoom: 1;
  }

  .checkbox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 250px;
    background-color: rgba(230, 227, 227, 0.623);

    .checkbox-item {
      width: 300px;
      margin: 20px auto 20px;
      span {
        float: left;
      }
      input {
        float: right;
      }
    }
    .btu-area{
        position: absolute;
        bottom: 20px;
        width: 100%;
        text-align: center;
    }
    .change{
        position: absolute;
        color: rgb(0, 140, 255);
        bottom: 10px;
        right: 10px;
        text-decoration: underline;
        font-size: 12px;

    }
  }
}
</style>
